.gourd-button {
    position: relative;
    display: inline-block;
    // padding: 20rem / @size;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: #707070;
    outline: none;
    border: none;
    background-color: #fff;
    border-radius: 2px;
    box-sizing: border-box;

    &::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background-color: #000;
        border: inherit;
        border-color: #000;
        border-radius: inherit;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
        content: ' ';
    }

    &:active::before {
        opacity: 0.1;
    }

    i:first-child {
        margin-right: 2px;
    }

    i:last-child {
        margin: 0;
    }

}

.gourd-button+.gourd-button {
    margin-left: (10rem / @size);
}

.gourd-button.is-circle {
    padding: 10px;
    font-size: 14px;
    border-radius: 50%;
}

.gourd-button.is-round{
    border-radius: 999px;
}

.gourd-button.is-square{
    border-radius: 0;
}

.gourd-button.is-block{
    display: block;
    width: 100%;
}

// 默认
.gourd-button--default {
    // color: #606266;
    // background-color: #fff;
    border: 1px solid #707070;
}

// 危险
.gourd-button--danger {
    color: #fff;
    background-color: #ff3e62;
    border: 1px solid #ff3e62;
}

// 警告
.gourd-button--warning {
    color: #fff;
    background-color: #fb9644;
    border: 1px solid #fb9644;
}

// 成功
.gourd-button--success {
    color: #fff;
    background-color: #19d469;
    border: 1px solid #19d469;
}

// 主要
.gourd-button--primary {
    color: #fff;
    background-color: #1dc8f0;
    border: 1px solid #1dc8f0;
}

// 信息
.gourd-button--info {
    color: #fff;
    background-color: #909399;
    border: 1px solid #909399;
}

.gourd-button--plain {

    &.gourd-button--success {
        color: #19d469;
    }

    &.gourd-button--primary {
        color: #1dc8f0;
    }

    &.gourd-button--danger {
        color: #ff3e62;
    }

    &.gourd-button--warning {
        color: #fb9644;
    }

    &.gourd-button--info {
        color: #909399;
    }

    background-color: #fff;
}

.gourd-button--disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.gourd-button--medium {
    font-size: 14px;
}

.gourd-button--small {
    font-size: 12px;
    padding: 10px 12px;
}

.gourd-button--mini {
    font-size: 12px;
    padding: 8px 12px;
}
